<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
            <!-- 路径导航 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>数据统计</el-breadcrumb-item>
                <el-breadcrumb-item>数据报表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div id="box" style="width: 1600px;height:800px;"></div>
    </el-card>
</template>
<script>
// import * as echarts from "echarts";
import _ from "lodash";
export default {
    data() {
        return {
            option: {
                title: {
                    text: "用户来源",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#E9EEF3",
                        },
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        boundaryGap: false,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
            },
        };
    },
    async mounted() {
        let { data: res } = await this.$axios.get("reports/type/1");
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
        const options = _.merge(this.options, res.data);
        var myChart = echarts.init(document.getElementById("box"));
        myChart.setOption(options);
    },
};
</script>
<style lang="less">
</style>
